iT邦幫忙

2023 iThome 鐵人賽

DAY 7
0
自我挑戰組

30 天架設 Node.js - Express 框架:快速學習之路系列 第 7

Day 7 - 靜態檔案和樣板引擎:處理靜態資源和動態網頁(中)

  • 分享至 

  • xImage
  •  

昨天已經可以開啟了圖片連結,今天我們來進階一點做一個樣版引擎的頁面吧!

什麼是樣版引擎

樣版引擎(template engine),顧名思義就是有一個固定樣版,可以動態的畫出我們的頁面,
另外也可以將頁面重複的部分做一個樣版,減少冗長重複的程式碼。

express 比較常看到的樣版引擎是 EJS,也有其他的樣版可以參考官網


實作 EJS 樣版引擎

我們今天就以 EJS 來做示範:

  1. 首先,先在終端機下 npm install ejs 的指令下載 EJS 套件。

  2. public 資料夾底下新建一個 views 的資料夾,並取一個 page.ejs 檔名的檔案。

  3. 寫入一個示範的 html

        // page.ejs
    
        <!DOCTYPE html>
        <html>
          <head>
            <meta charset="UTF-8"></meta>
            <title>圖書資訊</title>
          </head>
          <body>
            <h3>Book Page</h3>
          </body>
        </html>
    
  4. app.js 檔案取得樣版引擎所在的資料夾及樣版的屬性。

        // app.js
    
        app.set('views',__dirname + '/public/views') // 樣版引擎所在的資料夾
        app.set('view engine', 'ejs') // 樣版的屬性
    
  5. 接著我們到 routes/modules/book.jsres.send('Get a book')
    改成 res.render('page')(從回應文字改成回應一個頁面)。

       // routes/modules/book.js
    
       router.get('/', (req, res) => {
         // res.send('Get a book')
         res.render('page')
       })
    
  6. 最後我們只要在終端機下 node app.js 指令開啟伺服器,
    並到瀏覽器開啟 http://localhost:3000/book

    https://ithelp.ithome.com.tw/upload/images/20230902/20162304SvVcJP9DLZ.png

就可以看到我們做的樣板頁面了哦!

以上就是能夠基本使用樣板引擎的作法,
想要讓樣版引擎動態的出現文字的話,我們明天繼續看下去吧!/images/emoticon/emoticon29.gif

參考資料:


上一篇
Day 6 - 靜態檔案和樣板引擎:處理靜態資源和動態網頁(上)
下一篇
Day 8 - 靜態檔案和樣板引擎:處理靜態資源和動態網頁(下)
系列文
30 天架設 Node.js - Express 框架:快速學習之路30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言